<!-- 111111-->
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>公共交通异常检测系统 - 系统管理平台</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="./css/index.css">
		<link rel="icon" href="./img/logo_nobackground.png" type="image/png">
	</head>
	<body>
		<div id="app">
			<!-- 加载遮罩 -->
			<transition name="fade">
				<div v-if="loading" class="loading-overlay">
					<div class="loading-content">
						<div class="loading-spinner">
							<i class="el-icon-loading"></i>
						</div>
						<div>{{ loadingText }}</div>
					</div>
				</div>
			</transition>

			<!-- 主框架 -->
			<div class="admin-layout" v-show="!loading">
				<!-- 顶部导航栏 -->
				<header class="admin-header">
					<div class="header-left">
						<div class="logo-section">
							<img :src="logoUrl" alt="公共交通异常检测系统" class="header-logo" @error="handleLogoError">
							<h1 class="system-title">公共交通异常检测系统</h1>
						</div>
						<div class="breadcrumb-section">
							<el-breadcrumb separator="/">
								<el-breadcrumb-item>首页</el-breadcrumb-item>
								<el-breadcrumb-item>{{ currentPage }}</el-breadcrumb-item>
							</el-breadcrumb>
						</div>
					</div>

					<div class="header-right">
						<!-- 通知 -->
						<el-badge :value="notificationCount" class="notification-badge">
							<el-button type="text" @click="showNotifications">
								<i class="el-icon-bell"></i>
							</el-button>
						</el-badge>

						<!-- 用户菜单 -->
						<el-dropdown @command="handleUserCommand" class="user-dropdown">
							<div class="user-info">
								<el-avatar :size="32" :src="userInfo.avatar || './img/myphoto2.jpg'"
									icon="el-icon-user-solid"></el-avatar>
								<span class="username">{{ userInfo.username }}</span>
								<i class="el-icon-arrow-down"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="profile">
									<i class="el-icon-user"></i> 个人信息
								</el-dropdown-item>
								<el-dropdown-item command="settings">
									<i class="el-icon-setting"></i> 系统设置
								</el-dropdown-item>
								<el-dropdown-item divided command="logout">
									<i class="el-icon-switch-button"></i> 退出登录
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</header>

				<!-- 主内容区 -->
				<div class="admin-main">
					<!-- 侧边导航 -->
					<aside class="admin-sidebar" :class="{ 'collapsed': sidebarCollapsed }">
						<div class="sidebar-toggle" @click="toggleSidebar">
							<i :class="sidebarCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
						</div>

						<el-menu :default-active="activeMenu" :collapse="sidebarCollapsed" @select="handleMenuSelect"
							class="sidebar-menu">

							<el-menu-item index="dashboard">
								<i class="el-icon-data-board"></i>
								<span slot="title">首页</span>
							</el-menu-item>

							<el-submenu index="traffic">
								<template slot="title">
									<i class="el-icon-location"></i>
									<span>交通监控</span>
								</template>
								<el-menu-item index="traffic-monitor">实时监控</el-menu-item>
								<el-menu-item index="traffic-analysis">数据分析</el-menu-item>
								<el-menu-item index="traffic-alert">预警管理</el-menu-item>
							</el-submenu>

							<el-submenu index="vehicle">
								<template slot="title">
									<i class="el-icon-truck"></i>
									<span>车辆管理</span>
								</template>
								<el-menu-item index="vehicle-list">车辆列表</el-menu-item>
								<el-menu-item index="vehicle-tracking">车辆追踪</el-menu-item>
								<el-menu-item index="vehicle-maintenance">维护记录</el-menu-item>
							</el-submenu>

							<el-submenu index="data">
								<template slot="title">
									<i class="el-icon-pie-chart"></i>
									<span>数据统计</span>
								</template>
								<el-menu-item index="data-overview">数据概览</el-menu-item>
								<el-menu-item index="data-report">报表生成</el-menu-item>
								<el-menu-item index="data-export">数据导出</el-menu-item>
							</el-submenu>

							<el-menu-item index="system">
								<i class="el-icon-setting"></i>
								<span slot="title">系统管理</span>
							</el-menu-item>
						</el-menu>
					</aside>

					<!-- 内容区域 -->
					<main class="admin-content">
						<!-- 仪表盘内容 -->
						<div v-if="activeMenu === 'dashboard'" class="dashboard-content">
							<!-- 欢迎信息 -->
							<div class="welcome-card">
								<div class="welcome-info">
									<h2>欢迎回来，{{ userInfo.username }}！</h2>
									<p>{{ getWelcomeMessage() }}</p>
									<div class="user-stats">
										<span class="stat-item">角色：{{ userInfo.role }}</span>
										<span class="stat-item">登录时间：{{ formatLoginTime() }}</span>
									</div>
								</div>
								<div class="welcome-actions">
									<el-button type="primary" @click="startQuickAction">快速操作</el-button>
									<el-button @click="viewHelp">使用帮助</el-button>
								</div>
							</div>

							<!-- 天气预报模块 -->
							<div class="weather-module">
								<div class="weather-header">
									<h3>
										<i class="el-icon-cloudy"></i>
										天气预报（{{ weather.location }}）
									</h3>
									<div class="weather-tips">
										<div class="current-weather">
											<span class="current-temp">{{ weather.temperature }}°</span>
											<span class="current-desc">{{ weather.description }}</span>
										</div>
									</div>
								</div>

								<!-- 7天天气预报 -->
								<div class="weather-forecast">
									<div v-for="(day, idx) in weather.forecast" :key="idx" class="forecast-item"
										:class="{ 'active': selectedWeatherDay === idx }"
										@click="selectWeatherDay(idx)">
										<div class="forecast-date">
											<span class="day-name">{{ getDayName(day.date, idx) }}</span>
											<span class="month-day">{{ getMonthDay(day.date) }}</span>
										</div>
										<div class="forecast-icon">{{ getWeatherEmoji(day.text) }}</div>
										<div class="forecast-temps">
											<span class="temp-max">{{ day.max }}°</span>
											<span class="temp-min">{{ day.min }}°</span>
										</div>
										<div class="forecast-desc">{{ day.text }}</div>
									</div>
								</div>

								<!-- 选中日期的详细信息 -->
								<div v-if="selectedWeatherInfo" class="weather-details">
									<div class="details-header">
										<div class="detail-title-section">
											<h4>{{ getDetailDateTitle(selectedWeatherInfo.date) }} 详细信息</h4>
											<div class="weather-summary">
												<span
													class="main-weather">{{ getWeatherEmoji(selectedWeatherInfo.text) }}</span>
												<span class="weather-desc">{{ selectedWeatherInfo.text }}</span>
												<span class="temp-range">{{ selectedWeatherInfo.min }}°C ~
													{{ selectedWeatherInfo.max }}°C</span>
											</div>
										</div>
										<el-button type="text" @click="refreshWeatherDetails" class="refresh-btn"
											:loading="refreshing">
											<i class="el-icon-refresh"></i>
										</el-button>
									</div>

									<!-- 核心指标 -->
									<div class="weather-metrics">
										<div class="metric-item"
											v-for="metric in getWeatherMetrics(selectedWeatherInfo)" :key="metric.id">
											<div class="metric-icon" :style="{ color: metric.color }">
												<i :class="metric.icon"></i>
											</div>
											<div class="metric-content">
												<span class="metric-label">{{ metric.label }}</span>
												<span class="metric-value">{{ metric.value }}</span>
												<div class="metric-progress" v-if="metric.progress">
													<div class="progress-bar"
														:style="{ width: metric.progress + '%', backgroundColor: metric.color }">
													</div>
												</div>
											</div>
										</div>
									</div>

									<!-- 生活指数 -->
									<div class="life-tips">
										<h5>
											<i class="el-icon-star-off"></i>
											生活指数
										</h5>
										<div class="tips-grid">
											<div class="tip-item" v-for="tip in getLifeTips(selectedWeatherInfo)"
												:key="tip.id" @click="showTipDetail(tip)">
												<div class="tip-icon" :style="{ backgroundColor: tip.color }">
													<i :class="tip.icon"></i>
												</div>
												<div class="tip-content">
													<span class="tip-name">{{ tip.name }}</span>
													<span class="tip-level"
														:class="tip.level">{{ tip.levelText }}</span>
													<span class="tip-desc">{{ tip.description }}</span>
												</div>
											</div>
										</div>
									</div>

									<!-- 温馨提示 */
									<div class="weather-alerts">
										<h5>
											<i class="el-icon-bell"></i>
											温馨提示
										</h5>
										<div class="alert-list">
											<div 
												class="alert-item" 
												v-for="alert in getWeatherAlerts(selectedWeatherInfo)" 
												:key="alert.id"
												:class="alert.type"
											>
												<i :class="alert.icon"></i>
												<span>{{ alert.message }}</span>
											</div>
										</div>
									</div>

									<!-- 月相信息 -->
									<div class="moon-phase" v-if="selectedWeatherDay === 0">
										<div class="moon-info">
											<div class="moon-icon">🌙</div>
											<div class="moon-details">
												<span class="moon-phase-name">{{ getCurrentMoonPhase() }}</span>
												<span class="moon-desc">月相变化影响潮汐和情绪</span>
											</div>
										</div>
									</div>
								</div>
							</div>

							<!-- 统计卡片 -->
							<div class="stats-grid">
								<div class="stat-card" v-for="stat in statsData" :key="stat.id">
									<div class="stat-icon" :style="{ backgroundColor: stat.color }">
										<i :class="stat.icon"></i>
									</div>
									<div class="stat-content">
										<h3>{{ stat.value }}</h3>
										<p>{{ stat.label }}</p>
										<span class="stat-trend" :class="stat.trend">
											<i
												:class="stat.trend === 'up' ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
											{{ stat.change }}
										</span>
									</div>
								</div>
							</div>

							<!-- 快速链接 -->
							<div class="quick-links">
								<h3>快速功能</h3>
								<div class="links-grid">
									<div class="quick-link" v-for="link in quickLinks" :key="link.id"
										@click="handleQuickLink(link)">
										<i :class="link.icon"></i>
										<span>{{ link.title }}</span>
									</div>
								</div>
							</div>

							<!-- 最新动态 -->
							<div class="activity-feed">
								<h3>系统动态</h3>
								<div class="activity-list">
									<div class="activity-item" v-for="activity in recentActivities" :key="activity.id">
										<div class="activity-icon">
											<i :class="activity.icon" :style="{ color: activity.color }"></i>
										</div>
										<div class="activity-content">
											<p>{{ activity.content }}</p>
											<span class="activity-time">{{ activity.time }}</span>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- 其他页面内容占位 -->
						<div v-else class="page-content">
							<div class="page-placeholder">
								<i class="el-icon-document"></i>
								<h3>{{ getPageTitle() }}</h3>
								<p>{{ getPageDescription() }}</p>
								<el-button type="primary" @click="backToDashboard">返回仪表盘</el-button>
							</div>
						</div>
					</main>
				</div>
			</div>

			<!-- 通知抽屉 -->
			<el-drawer title="系统通知" :visible.sync="notificationDrawer" direction="rtl" size="400px">
				<div class="notification-list">
					<div class="notification-item" v-for="notification in notifications" :key="notification.id">
						<div class="notification-content">
							<h4>{{ notification.title }}</h4>
							<p>{{ notification.content }}</p>
							<span class="notification-time">{{ notification.time }}</span>
						</div>
						<el-button type="text" @click="markAsRead(notification.id)">
							<i class="el-icon-check"></i>
						</el-button>
					</div>
				</div>
			</el-drawer>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						// 加载状态
						loading: true,
						loadingText: '正在加载系统...',

						// 用户信息
						userInfo: {
							username: '',
							role: '',
							avatar: './img/myphoto2.jpg',
							loginTime: ''
						},

						// 界面状态
						sidebarCollapsed: false,
						activeMenu: 'dashboard',
						currentPage: '仪表盘',

						// 通知相关
						notificationCount: 3,
						notificationDrawer: false,
						notifications: [{
								id: 1,
								title: '系统更新通知',
								content: '系统将在今晚23:00进行维护更新，预计耗时2小时',
								time: '2025-05-26 14:30',
								read: false
							},
							{
								id: 2,
								title: '交通预警',
								content: '检测到重庆主城区交通流量异常，请及时关注',
								time: '2025-05-26 13:15',
								read: false
							},
							{
								id: 3,
								title: '数据备份完成',
								content: '系统数据已成功备份至云端存储',
								time: '2025-05-26 12:00',
								read: false
							}
						],

						// Logo
						logoUrl: './img/logo_nobackground.png',

						// 统计数据
						statsData: [{
								id: 1,
								label: '在线车辆',
								value: '26',
								icon: 'el-icon-truck',
								color: '#667eea',
								trend: 'up',
								change: '+12%'
							},
							{
								id: 2,
								label: '安全事件',
								value: '8',
								icon: 'el-icon-warning',
								color: '#f56c6c',
								trend: 'down',
								change: '-8%'
							},
							{
								id: 3,
								label: '路段监控',
								value: '156',
								icon: 'el-icon-location-outline',
								color: '#67c23a',
								trend: 'up',
								change: '+5%'
							},
							{
								id: 4,
								label: '数据处理',
								value: '96%',
								icon: 'el-icon-data-analysis',
								color: '#e6a23c',
								trend: 'up',
								change: '+2%'
							}
						],

						// 快速链接
						quickLinks: [{
								id: 1,
								title: '车辆追踪',
								icon: 'el-icon-location',
								action: 'vehicle-tracking',
								status: 'planned'
							},
							{
								id: 2,
								title: '数据分析',
								icon: 'el-icon-pie-chart',
								action: 'data-analysis',
								status: 'planned'
							},
							{
								id: 3,
								title: '预警处理',
								icon: 'el-icon-bell',
								action: 'alert-handling',
								status: 'planned'
							},
							{
								id: 4,
								title: '系统设置',
								icon: 'el-icon-setting',
								action: 'system-settings',
								status: 'planned'
							},
							{
								id: 5,
								title: '用户管理',
								icon: 'el-icon-user',
								action: 'user-management',
								status: 'planned'
							},
							{
								id: 6,
								title: '帮助中心',
								icon: 'el-icon-question',
								action: 'help-center',
								status: 'planned'
							}
						],

						// 最新动态
						recentActivities: [{
								id: 1,
								content: '用户ts登录了系统',
								icon: 'el-icon-user',
								color: '#67c23a',
								time: '5分钟前'
							},
							{
								id: 2,
								content: '用户ts登录了系统',
								icon: 'el-icon-success',
								color: '#67c23a',
								time: '12分钟前'
							},
							{
								id: 3,
								content: '交通数据同步完成',
								icon: 'el-icon-refresh',
								color: '#409eff',
								time: '15分钟前'
							},
							{
								id: 4,
								content: '检测到异常交通流量',
								icon: 'el-icon-warning',
								color: '#f56c6c',
								time: '30分钟前'
							},
							{
								id: 5,
								content: '系统备份任务执行成功',
								icon: 'el-icon-success',
								color: '#67c23a',
								time: '1小时前'
							}
						],

						// 天气相关
						weather: {
							temperature: 0,
							description: '获取中...',
							location: '正在定位...',
							iconClass: '',
							forecast: []
						},

						// 天气预报选中状态
						selectedWeatherDay: 0,
						refreshing: false,

						// 默认位置坐标 (重庆)
						defaultCoords: {
							latitude: 29.4316,
							longitude: 106.9123
						}
					};
				},

				computed: {
					// 获取选中日期的天气信息
					selectedWeatherInfo() {
						return this.weather.forecast[this.selectedWeatherDay] || null;
					}
				},

				mounted() {
					this.initSystem();
					this.getCurrentLocation();
				},

				methods: {
					// 系统初始化
					async initSystem() {
						try {
							// 检查登录状态
							const authToken = localStorage.getItem('authToken');
							const userInfoStr = localStorage.getItem('userInfo');

							if (!authToken || !userInfoStr) {
								this.$message.warning('请先登录系统');
								setTimeout(() => {
									window.location.href = './login.html';
								}, 1000);
								return;
							}

							// 解析用户信息
							this.userInfo = JSON.parse(userInfoStr);
							this.userInfo.loginTime = localStorage.getItem('loginTime') || new Date().toISOString();

							// 更新最新动态中的用户名
							if (this.recentActivities.length > 1) {
								this.recentActivities[1].content = `用户 ${this.userInfo.username} 登录了系统`;
							}

							// 模拟加载过程
							await this.simulateLoading();

							// 加载完成
							this.loading = false;
							this.$message.success(`欢迎回来，${this.userInfo.username}！`);

						} catch (error) {
							console.error('System initialization error:', error);
							this.$message.error('系统初始化失败');
							setTimeout(() => {
								window.location.href = './login.html';
							}, 2000);
						}
					},

					// 模拟加载过程
					simulateLoading() {
						const steps = [{
								text: '验证用户身份...',
								duration: 800
							},
							{
								text: '加载系统配置...',
								duration: 600
							},
							{
								text: '初始化数据...',
								duration: 700
							},
							{
								text: '准备界面...',
								duration: 500
							}
						];

						return new Promise((resolve) => {
							let currentStep = 0;

							const processStep = () => {
								if (currentStep < steps.length) {
									this.loadingText = steps[currentStep].text;
									setTimeout(() => {
										currentStep++;
										processStep();
									}, steps[currentStep]?.duration || 0);
								} else {
									resolve();
								}
							};

							processStep();
						});
					},

					// 获取欢迎消息
					getWelcomeMessage() {
						const hour = new Date().getHours();
						if (hour < 6) return '夜深了，注意休息！';
						if (hour < 12) return '早上好，新的一天开始了！';
						if (hour < 18) return '下午好，工作进展如何？';
						return '晚上好，今天辛苦了！';
					},

					// 格式化登录时间
					formatLoginTime() {
						if (!this.userInfo.loginTime) return '';
						return new Date(this.userInfo.loginTime).toLocaleString('zh-CN');
					},

					// 侧边栏切换
					toggleSidebar() {
						this.sidebarCollapsed = !this.sidebarCollapsed;
					},

					// 菜单选择
					handleMenuSelect(index) {
						// 页面跳转映射配置
						const pageRoutes = {
							// 交通监控模块
							'traffic-monitor': './traffic-monitor.html',
							'traffic-analysis': './traffic-analysis.html',
							'traffic-alert': './traffic-alert.html',

							// 车辆管理模块  
							'vehicle-list': './vehicle-list.html',
							'vehicle-tracking': './vehicle-tracking.html',
							'vehicle-maintenance': './vehicle-maintenance.html',

							// 数据统计模块
							'data-overview': './data-overview.html',
							'data-report': './data-report.html',
							'data-export': './data-export.html',

							// 系统管理模块
							'system': './system-management.html'
						};

						// 已完成的页面列表
						const completedPages = [
							'traffic-monitor',
							'traffic-analysis',
							'vehicle-tracking',
							'vehicle-maintenance',
							'data-overview',
							'data-report',
							'data-export',
							'system'
						];

						// 检查是否需要跳转到专门页面
						if (pageRoutes[index]) {
							// 预警管理直接跳转
							if (index === 'traffic-alert') {
								window.location.href = pageRoutes[index];
								return;
							}
							if (completedPages.includes(index)) {
								// 已完成的页面直接跳转
								window.location.href = pageRoutes[index];
							} else {
								// 未完成的页面显示提示
								this.$confirm(
									`${this.getMenuTitle(index)}页面正在开发中，是否前往查看？`,
									'页面开发状态', {
										confirmButtonText: '前往查看',
										cancelButtonText: '留在当前页',
										type: 'info',
										customClass: 'dev-status-dialog'
									}
								).then(() => {
									// 用户确认后跳转（即使页面可能不存在）
									window.location.href = pageRoutes[index];
								}).catch(() => {
									// 用户取消，停留在仪表盘
									this.activeMenu = 'dashboard';
									this.currentPage = '仪表盘';
								});
							}
							return;
						}

						// 仪表盘或其他不需要跳转的页面
						this.activeMenu = index;
						this.currentPage = this.getMenuTitle(index);
					},

					// 获取菜单标题
					getMenuTitle(index) {
						const titles = {
							'dashboard': '首页',
							'traffic-monitor': '实时监控',
							'traffic-analysis': '数据分析',
							'traffic-alert': '预警管理',
							'vehicle-list': '车辆列表',
							'vehicle-tracking': '车辆追踪',
							'vehicle-maintenance': '维护记录',
							'data-overview': '数据概览',
							'data-report': '报表生成',
							'data-export': '数据导出',
							'system': '系统管理'
						};
						return titles[index] || '未知页面';
					},

					// 用户命令处理
					handleUserCommand(command) {
						switch (command) {
							case 'profile':
								this.$message.info('个人信息功能开发中');
								break;
							case 'settings':
								this.$message.info('系统设置功能开发中');
								break;
							case 'logout':
								this.handleLogout();
								break;
						}
					},

					// 退出登录
					handleLogout() {
						this.$confirm('确定要退出登录吗？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							// 清除登录状态
							localStorage.removeItem('authToken');
							localStorage.removeItem('userInfo');
							localStorage.removeItem('loginTime');

							this.$message.success('已安全退出');
							setTimeout(() => {
								window.location.href = './login.html';
							}, 1000);
						});
					},

					// 显示通知
					showNotifications() {
						this.notificationDrawer = true;
					},

					// 标记为已读
					markAsRead(id) {
						const notification = this.notifications.find(n => n.id === id);
						if (notification && !notification.read) {
							notification.read = true;
							this.notificationCount = Math.max(0, this.notificationCount - 1);
							this.$message.success('已标记为已读');
						}
					},

					// 快速链接处理
					handleQuickLink(link) {
						// 快速链接到页面的映射
						const quickLinkRoutes = {
							'vehicle-tracking': './vehicle-tracking.html', // 车辆追踪
							'data-analysis': './traffic-analysis.html', // 数据分析 
							'alert-handling': './traffic-alert.html', // 报警处理
							'system-settings': './system-management.html', // 系统设置
							'user-management': './system-management.html', // 用户管理
							'help-center': './help-center.html' // 帮助中心
						};

						if (quickLinkRoutes[link.action]) {
							if (link.action === 'vehicle-tracking' || link.action === 'data-analysis' ||
								link.action === 'alert-handling' || link.action === 'system-settings' ||
								link.action === 'user-management') {
								// 大部分功能页面都在开发中
								this.$confirm(
									`${link.title}功能正在开发中，是否前往查看？`,
									'功能开发状态', {
										confirmButtonText: '前往查看',
										cancelButtonText: '取消',
										type: 'info'
									}
								).then(() => {
									window.location.href = quickLinkRoutes[link.action];
								});
							} else {
								// 其他页面直接跳转
								window.location.href = quickLinkRoutes[link.action];
							}
						} else {
							this.$message.info(`${link.title}功能开发中...`);
						}
					},

					// 页面标题和描述
					getPageTitle() {
						return this.getMenuTitle(this.activeMenu);
					},

					getPageDescription() {
						const descriptions = {
							// 交通监控模块
							'traffic-monitor': '✅ 已完成 - 实时监控交通状况，查看路段流量和异常情况',
							'traffic-analysis': '✅ 已完成 - 分析交通数据，生成趋势报告和预测模型',
							'traffic-alert': '🔄 待开发 - 管理交通预警规则和处理异常事件',

							// 车辆管理模块
							'vehicle-list': '🔄 待开发 - 查看和管理所有车辆的基础信息和状态',
							'vehicle-tracking': '✅ 已完成 - 实时追踪车辆位置和运行状态',
							'vehicle-maintenance': '✅ 已完成 - 记录和管理车辆维护保养信息',

							// 数据统计模块
							'data-overview': '✅ 已完成 - 查看系统数据概览和关键指标统计',
							'data-report': '✅ 已完成 - 生成各类数据报表和分析图表',
							'data-export': '✅ 已完成 - 导出系统数据和生成报告文件',

							// 系统管理模块
							'system': '✅ 已完成 - 系统配置、用户管理和权限设置'
						};
						return descriptions[this.activeMenu] || '该功能正在开发中，敬请期待';
					},

					// 返回仪表盘
					backToDashboard() {
						this.activeMenu = 'dashboard';
						this.currentPage = '仪表盘';
					},

					// 其他功能方法
					startQuickAction() {
						this.$message.info('快速操作功能开发中');
					},

					viewHelp() {
						this.$message.info('使用帮助功能开发中');
					},

					// Logo错误处理
					handleLogoError() {
						this.logoUrl =
							'';
					},

					// 获取开发状态样式类
					getStatusClass(status) {
						const classMap = {
							'completed': 'completed',
							'in-progress': 'in-progress',
							'planned': 'planned'
						};
						return classMap[status] || 'planned';
					},

					// 获取开发状态文本
					getStatusText(status) {
						const textMap = {
							'completed': '✅ 已完成',
							'in-progress': '🔄 开发中',
							'planned': '📋 待开发'
						};
						return textMap[status] || '📋 待开发';
					},

					// 获取当前位置
					getCurrentLocation() {
						if (navigator.geolocation) {
							navigator.geolocation.getCurrentPosition(
								(position) => {
									const latitude = position.coords.latitude;
									const longitude = position.coords.longitude;
									console.log('位置获取成功:', latitude, longitude);
									this.fetchWeatherData(longitude, latitude);
								},
								(error) => {
									console.error('位置获取失败:', error);
									// 使用默认位置（重庆）
									this.weather.location = '重庆';
									this.fetchWeatherData(this.defaultCoords.longitude, this.defaultCoords.latitude);
								}
							);
						} else {
							console.error('浏览器不支持地理位置');
							// 使用默认位置
							this.weather.location = '重庆';
							this.fetchWeatherData(this.defaultCoords.longitude, this.defaultCoords.latitude);
						}
					},

					// 获取天气数据
					fetchWeatherData(longitude, latitude) {
						const key = "f9cdb27cda63499499f0ee396e308620";
						// 实况天气
						fetch(
								`https://k2487qk85a.re.qweatherapi.com/v7/weather/now?location=${longitude},${latitude}&key=${key}`)
							.then(res => res.json())
							.then(data => {
								if (data.code === '200') {
									const now = data.now;
									this.weather.temperature = now.temp;
									this.weather.description = now.text;
									this.setWeatherIconClass(now.text, now.icon);
									this.getCityInfo(longitude, latitude, key);
								}
							});
						// 7天天气预报
						fetch(
								`https://k2487qk85a.re.qweatherapi.com/v7/weather/7d?location=${longitude},${latitude}&key=${key}`)
							.then(res => res.json())
							.then(data => {
								if (data.code === '200' && data.daily) {
									this.weather.forecast = data.daily.slice(0, 7).map(item => ({
										date: item.fxDate,
										min: item.tempMin,
										max: item.tempMax,
										text: item.textDay,
										windDir: item.windDirDay,
										windScale: item.windScaleDay,
										humidity: item.humidity,
										sunrise: item.sunrise,
										sunset: item.sunset,
										vis: item.vis
									}));
								}
							});
					},

					// 获取城市信息
					getCityInfo(longitude, latitude, key) {
						fetch(
								`https://k2487qk85a.re.qweatherapi.com/geo/v2/city/lookup?location=${longitude},${latitude}&key=${key}`)
							.then(res => res.json())
							.then(data => {
								console.log('城市信息结果:', data);
								if (data.code === '200' && data.location && data.location.length > 0) {
									const locationInfo = data.location[0];
									this.weather.location = locationInfo.name || locationInfo.adm2 || locationInfo
										.adm1;
								} else {
									this.weather.location = '未知位置';
									this.$message.error('获取城市信息失败');
								}
							})
							.catch(err => {
								console.error('城市信息请求失败:', err);
								this.weather.location = '未知位置';
								this.$message.error('城市信息请求失败');
							});
					},

					// 设置天气图标类
					setWeatherIconClass(text, iconCode) {
						if (text.includes('晴')) {
							this.weather.iconClass = 'weather-sunny';
						} else if (text.includes('多云') || text.includes('阴')) {
							this.weather.iconClass = 'weather-cloudy';
						} else if (text.includes('雨')) {
							this.weather.iconClass = 'weather-rainy';
						} else if (text.includes('雪')) {
							this.weather.iconClass = 'weather-snowy';
						} else if (text.includes('雾') || text.includes('霾')) {
							this.weather.iconClass = 'weather-foggy';
						} else {
							// 根据和风天气的图标代码进行判断
							const iconNumber = parseInt(iconCode);
							if (iconNumber >= 100 && iconNumber <= 103) {
								this.weather.iconClass = 'weather-sunny';
							} else if (iconNumber >= 104 && iconNumber <= 104) {
								this.weather.iconClass = 'weather-cloudy';
							} else if (iconNumber >= 300 && iconNumber <= 399) {
								this.weather.iconClass = 'weather-rainy';
							} else if (iconNumber >= 400 && iconNumber <= 499) {
								this.weather.iconClass = 'weather-snowy';
							} else if (iconNumber >= 500 && iconNumber <= 599) {
								this.weather.iconClass = 'weather-foggy';
							} else {
								this.weather.iconClass = 'weather-sunny'; // 默认
							}
						}
					},

					getWeatherEmoji(text) {
						if (text.includes('晴')) return '☀️';
						if (text.includes('多云')) return '⛅';
						if (text.includes('阴')) return '☁️';
						if (text.includes('雨')) return '🌧️';
						if (text.includes('雪')) return '❄️';
						if (text.includes('雾') || text.includes('霾')) return '🌫️';
						if (text.includes('雷')) return '⛈️';
						return '🌈';
					},

					// 天气预报相关方法
					selectWeatherDay(index) {
						this.selectedWeatherDay = index;
					},

					getDayName(date, index) {
						const dayNames = ['今天', '明天', '后天'];
						if (index < 3) {
							return dayNames[index];
						}
						const dayOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
						const dateObj = new Date(date);
						return dayOfWeek[dateObj.getDay()];
					},

					getMonthDay(date) {
						const dateObj = new Date(date);
						return `${dateObj.getMonth() + 1}/${dateObj.getDate()}`;
					},

					getDetailDateTitle(date) {
						const dateObj = new Date(date);
						const today = new Date();
						const diffTime = dateObj.getTime() - today.getTime();
						const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

						if (diffDays === 0) return '今天';
						if (diffDays === 1) return '明天';
						if (diffDays === 2) return '后天';

						const dayOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
						return `${dateObj.getMonth() + 1}月${dateObj.getDate()}日 ${dayOfWeek[dateObj.getDay()]}`;
					},

					// 天气详情相关方法
					refreshWeatherDetails() {
						this.refreshing = true;
						setTimeout(() => {
							this.refreshing = false;
							this.$message.success('天气信息已更新');
						}, 1000);
					},

					getWeatherMetrics(weatherInfo) {
						return [{
								id: 'humidity',
								label: '湿度',
								value: weatherInfo.humidity + '%',
								icon: 'el-icon-water',
								color: '#3b82f6',
								progress: parseInt(weatherInfo.humidity)
							},
							{
								id: 'wind',
								label: '风向风力',
								value: `${weatherInfo.windDir} ${weatherInfo.windScale}级`,
								icon: 'el-icon-position',
								color: '#10b981',
								progress: parseInt(weatherInfo.windScale) * 10
							},
							{
								id: 'visibility',
								label: '能见度',
								value: (weatherInfo.vis || '15') + 'km',
								icon: 'el-icon-view',
								color: '#f59e0b',
								progress: Math.min(parseInt(weatherInfo.vis || 15) * 5, 100)
							},
							{
								id: 'sunrise',
								label: '日出时间',
								value: weatherInfo.sunrise,
								icon: 'el-icon-sunrise',
								color: '#f97316'
							},
							{
								id: 'sunset',
								label: '日落时间',
								value: weatherInfo.sunset,
								icon: 'el-icon-sunset',
								color: '#8b5cf6'
							},
						/* 	{
								id: 'uvindex',
								label: '紫外线指数',
								value: this.getRandomUVIndex(),
								icon: 'el-icon-sunny',
								color: '#ef4444',
								progress: this.getRandomUVIndex() * 10
							} */
						];
					},

					getLifeTips(weatherInfo) {
						const tips = [];
						const temp = parseInt((parseInt(weatherInfo.min) + parseInt(weatherInfo.max)) / 2);
						const humidity = parseInt(weatherInfo.humidity);
						const isRainy = weatherInfo.text.includes('雨');
						const isSunny = weatherInfo.text.includes('晴');

						// 穿衣指数
						let clothingLevel = '';
						let clothingColor = '';
						let clothingDesc = '';
						if (temp >= 25) {
							clothingLevel = 'comfortable';
							clothingColor = '#10b981';
							clothingDesc = '薄衣物，注意防晒';
						} else if (temp >= 15) {
							clothingLevel = 'moderate';
							clothingColor = '#f59e0b';
							clothingDesc = '长袖衣物较舒适';
						} else {
							clothingLevel = 'warm';
							clothingColor = '#ef4444';
							clothingDesc = '需要厚衣物保暖';
						}

						tips.push({
							id: 'clothing',
							name: '穿衣指数',
							icon: 'el-icon-user',
							level: clothingLevel,
							levelText: temp >= 25 ? '薄衣' : temp >= 15 ? '适中' : '厚衣',
							color: clothingColor,
							description: clothingDesc
						});

						// 运动指数
						let sportLevel = '';
						let sportColor = '';
						let sportDesc = '';
						if (isRainy) {
							sportLevel = 'poor';
							sportColor = '#ef4444';
							sportDesc = '不适宜户外运动';
						} else if (isSunny && temp <= 30) {
							sportLevel = 'excellent';
							sportColor = '#10b981';
							sportDesc = '适宜各种运动';
						} else {
							sportLevel = 'moderate';
							sportColor = '#f59e0b';
							sportDesc = '适度运动较好';
						}

						tips.push({
							id: 'sport',
							name: '运动指数',
							icon: 'el-icon-bicycle',
							level: sportLevel,
							levelText: sportLevel === 'excellent' ? '优' : sportLevel === 'moderate' ? '良' : '差',
							color: sportColor,
							description: sportDesc
						});

						// 洗车指数
						tips.push({
							id: 'carwash',
							name: '洗车指数',
							icon: 'el-icon-truck',
							level: isRainy ? 'poor' : 'good',
							levelText: isRainy ? '不宜' : '适宜',
							color: isRainy ? '#ef4444' : '#10b981',
							description: isRainy ? '雨天不宜洗车' : '天气较好，适宜洗车'
						});

						// 紫外线指数
						tips.push({
							id: 'uv',
							name: '紫外线',
							icon: 'el-icon-sunny',
							level: isSunny ? 'strong' : 'weak',
							levelText: isSunny ? '强' : '弱',
							color: isSunny ? '#ef4444' : '#10b981',
							description: isSunny ? '注意防晒护肤' : '紫外线较弱'
						});

						return tips;
					},

					getWeatherAlerts(weatherInfo) {
						const alerts = [];
						const temp = parseInt((parseInt(weatherInfo.min) + parseInt(weatherInfo.max)) / 2);
						const humidity = parseInt(weatherInfo.humidity);
						const isRainy = weatherInfo.text.includes('雨');
						const windScale = parseInt(weatherInfo.windScale);

						// 基础提示
						alerts.push({
							id: 'basic',
							type: 'info',
							icon: 'el-icon-info',
							message: `预计${this.getDetailDateTitle(weatherInfo.date)}气温${weatherInfo.min}°C~${weatherInfo.max}°C，${weatherInfo.text}。`
						});

						// 温度相关提示
						if (temp >= 30) {
							alerts.push({
								id: 'hot',
								type: 'warning',
								icon: 'el-icon-warning',
								message: '气温较高，外出请注意防暑降温，多补充水分。'
							});
						} else if (temp <= 5) {
							alerts.push({
								id: 'cold',
								type: 'warning',
								icon: 'el-icon-warning',
								message: '气温较低，请注意保暖，预防感冒。'
							});
						}

						// 降水提示
						if (isRainy) {
							alerts.push({
								id: 'rain',
								type: 'info',
								icon: 'el-icon-umbrella',
								message: '有降水，出行请携带雨具，注意交通安全。'
							});
						}

						// 湿度提示
						if (humidity >= 80) {
							alerts.push({
								id: 'humid',
								type: 'success',
								icon: 'el-icon-water',
								message: '湿度较高，空气湿润，适合护肤但要注意通风。'
							});
						} else if (humidity <= 30) {
							alerts.push({
								id: 'dry',
								type: 'warning',
								icon: 'el-icon-warning',
								message: '空气干燥，请注意补水，使用加湿器改善环境。'
							});
						}

						// 风力提示
						if (windScale >= 4) {
							alerts.push({
								id: 'windy',
								type: 'warning',
								icon: 'el-icon-position',
								message: '风力较大，外出注意安全，避免高处作业。'
							});
						}

						return alerts;
					},

					showTipDetail(tip) {
						this.$message({
							message: `${tip.name}：${tip.description}`,
							type: tip.level === 'excellent' || tip.level === 'good' ? 'success' : tip.level ===
								'moderate' || tip.level === 'comfortable' ? 'warning' : 'error',
							duration: 3000
						});
					},

					getCurrentMoonPhase() {
						const phases = ['新月', '娥眉月', '上弦月', '盈凸月', '满月', '亏凸月', '下弦月', '残月'];
						const today = new Date();
						const phaseIndex = Math.floor((today.getDate() % 29.5) / 3.7);
						return phases[phaseIndex] || '新月';
					},

					getRandomUVIndex() {
						// 模拟紫外线指数 0-10
						return Math.floor(Math.random() * 10) + 1;
					}
				}
			});
		</script>
	</body>
</html>